//填写风险评估问卷(已修改)
import React, { useState } from 'react';
import { Radio, Card ,Button,message} from 'antd';
import axios from 'axios';

const Questionnaire = () => {
  //设初始问题答案都为0
  const [answers, setAnswers] = useState({ q1: 0, q2: 0, q3: 0,q4: 0, q5: 0, q6: 0,q7: 0, q8: 0, q9: 0, q10: 0 });

  // 定义每个问题的选项所对应的分数
  const questionScores = {
    q1: { A: 4, B: 7, C: 10, D: 1 },
    q2: { A: 10, B: 7, C: 4, D: 1 },
    q3: { A: 10, B: 7, C: 4, D: 2 },
    q4: { A: 10, B: 7, C: 2, D: 1 },
    q5: { A: 10, B: 9, C: 7, D: 3 },
    q6: { A: 7, B: 4, C: 10, D: 2 },
    q7: { A: 3, B: 4, C: 4, D: 8 },
    q8: { A: 5, B: 8, C: 4, D: 10,E:2 },
    q9: { A: 2, B: 7, C: 5, D: 10 },
    q10: { A: 8, B: 3, C: 6, D: 4 ,E:9},
  };

  // 计算总分
  const totalScore = Object.values(answers).reduce((acc, score) => acc + score, 0);

  const handleAnswerChange = (question, option) => {
    // 设置每个问题的答案，并更新分数
    setAnswers({ ...answers, [question]: questionScores[question][option] });
  };
  //根据总分判断风险等级
  const determineRiskLevel = (score) => {
    if (score < 20) {
      return 'C1';
    } else if (score >= 20 && score <= 36) {
      return 'C2';
    } else if (score >= 37 && score <= 53) {
      return 'C3';
    } else if (score >= 54 && score <= 82) {
      return 'C4';
    } else {
      return 'C5';
    }
  };
  const handleSubmit = () => {
    const risk_type = determineRiskLevel(totalScore);
    const score = totalScore;
    const token = localStorage.getItem('token');
    const username = localStorage.getItem('username');
    console.log(risk_type, score, username);
    // 使用axios发送数据到后端
    axios.post('/api/user/risk_survey', { risk_type, score, username },
      )
      .then((response) => {
        console.log('Success:', response.data);
        // 这里可以处理后端响应
        message.success('提交成功');
      })
      .catch((error) => {
        console.log('Error:', error);
        // 登录失败时的处理
        if (error.response) {
          // 服务器返回了错误响应
          const errorMessage = error.response.data.msg || '提交失败';
          message.error(errorMessage);
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          message.error('请求失败，请检查网络连接');
        } else {
          // 发送请求时出了问题
          message.error('请求失败，请检查后端服务是否可用');
        }
      });
  };
  
  //以下为问卷问题
  return (
    <div>
      <Card title="问题 1: 您的主要收入来源是：">
        <Radio.Group
          onChange={e => handleAnswerChange('q1', e.target.value)}
          value={Object.keys(questionScores.q1).find(key => questionScores.q1[key] === answers.q1)}
        >
          {Object.keys(questionScores.q1).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
              <Radio value={option}>
                {option}. {option === 'A' && '工资、劳务报酬'}
                {option === 'B' && '生产经营所得'}
                {option === 'C' && '利息股息、转让证券等金融性资产收入'}
                {option === 'D' && '无固定收入'}
              </Radio>
            </div>
          ))}
        </Radio.Group>
      </Card>


      <Card title="问题 2: 您认为自己能承受的最大投资损失是多少？">
        <Radio.Group
          onChange={e => handleAnswerChange('q2', e.target.value)}
          value={Object.keys(questionScores.q2).find(key => questionScores.q2[key] === answers.q2)}
        >
          {Object.keys(questionScores.q2).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '损失可能超过本金'}
              {option === 'B' && '较大的投资损失'}
              {option === 'C' && '一定的投资损失'}
              {option === 'D' && '尽可能保证本金安全，不能承受任何损失'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card title={
        <div
          style={{
            whiteSpace: 'normal',
            overflow: 'hidden',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 5, // 限制行数
            maxWidth: '100%' // 您可以根据需要调整最大宽度
          }}
        >问题 3: 今后五年内，您需要负法定抚养、赡养义务的人数为：
      </div>
    }>
        <Radio.Group
          onChange={e => handleAnswerChange('q3', e.target.value)}
          value={Object.keys(questionScores.q3).find(key => questionScores.q3[key] === answers.q3)}
        >
          {Object.keys(questionScores.q3).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '无'}
              {option === 'B' && '1-2人'}
              {option === 'C' && '3-4人'}
              {option === 'D' && '5人以上'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card title="问题 4: 您家庭的就业状况是：">
        <Radio.Group
          onChange={e => handleAnswerChange('q4', e.target.value)}
          value={Object.keys(questionScores.q4).find(key => questionScores.q4[key] === answers.q4)}
        >
          {Object.keys(questionScores.q4).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '未婚，但有稳定收入工作'}
              {option === 'B' && '你与配偶其中至少一人有稳定收入工作'}
              {option === 'C' && '未婚，无稳定收入工作'}
              {option === 'D' && '你与配偶均没有稳定收入工作'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card title="问题 5: 以下描述中何种符合您的实际情况？">
        <Radio.Group
          onChange={e => handleAnswerChange('q5', e.target.value)}
          value={Object.keys(questionScores.q5).find(key => questionScores.q5[key] === answers.q5)}
        >
          {Object.keys(questionScores.q5).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '此前从事过金融、经济或财会等相关工作超过两年'}
              {option === 'B' && '取得证券从业资格、注册会计师证书（CPA）或注册金融分析师证书（CFA）中一项及以上'}
              {option === 'C' && '已取得金融、经济或财会等相关专业学士以上学位'}
              {option === 'D' && '我不符合上述任何一条描述'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card title="问题 6: 您的投资经验可以概括为：">
        <Radio.Group
          onChange={e => handleAnswerChange('q6', e.target.value)}
          value={Object.keys(questionScores.q6).find(key => questionScores.q6[key] === answers.q6)}
        >
          {Object.keys(questionScores.q6).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '丰富：参与过股票基金等产品的交易，倾向于自己做出投资决策'}
              {option === 'B' && '一般：除银行存款外，购买过少量的基金、保险等理财产品'}
              {option === 'C' && '非常丰富：参与过大部分高风险金融产品的交易'}
              {option === 'D' && '有限：除了银行存款外几乎没有其他任何投资经验'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card title={
        <div
          style={{
            whiteSpace: 'normal',
            overflow: 'hidden',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 5, // 限制行数
            maxWidth: '100%' // 您可以根据需要调整最大宽度
          }}
        >问题 7: 您是否有尚未清偿的数额较大的债务，如果有，其性质是：
        </div>
      }
      >
        <Radio.Group
          onChange={e => handleAnswerChange('q7', e.target.value)}
          value={Object.keys(questionScores.q7).find(key => questionScores.q7[key] === answers.q7)}
        >
          {Object.keys(questionScores.q7).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '有，住房按揭抵押贷款等长期定额债务'}
              {option === 'B' && '有，信用卡欠款、消费信贷等短期债务'}
              {option === 'C' && '有，亲朋之间借款'}
              {option === 'D' && '没有'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card 
      title={
        <div
          style={{
            whiteSpace: 'normal',
            overflow: 'hidden',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 5, // 限制行数
            maxWidth: '100%' // 您可以根据需要调整最大宽度
          }}
        >
          问题 8: 假设有两种不同的投资：投资A将获得5%的收益，有可能有一定损失；投资B将获得20%的收益，但可能面临着25%甚至更高的亏损。您倾向于将您的资产分配为：
        </div>
      }
      //style={{ width: 700 }}
    >
        <Radio.Group
          onChange={e => handleAnswerChange('q8', e.target.value)}
          value={Object.keys(questionScores.q8).find(key => questionScores.q8[key] === answers.q8)}
        >
          {Object.keys(questionScores.q8).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '两种投资各一半'}
              {option === 'B' && '大部分投资B'}
              {option === 'C' && '大部分投资A'}
              {option === 'D' && '全部投资B'}
              {option === 'E' && '全部投资A'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card  title={
        <div
          style={{
            whiteSpace: 'normal',
            overflow: 'hidden',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 5, // 限制行数
            maxWidth: '100%' // 您可以根据需要调整最大宽度
          }}
        >
          问题 9: 在进行投资时，您做出一项重大决策需要多长时间： </div>
      }
      //style={{ width: 700 }}
    >
        <Radio.Group
          onChange={e => handleAnswerChange('q9', e.target.value)}
          value={Object.keys(questionScores.q9).find(key => questionScores.q9[key] === answers.q9)}
        >
          {Object.keys(questionScores.q9).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '几个月甚至更长'}
              {option === 'B' && '几个小时'}
              {option === 'C' && '几天'}
              {option === 'D' && '几分钟甚至更短'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

      <Card title="问题 10: 您投资金融市场的主要目的是什么：">
        <Radio.Group
          onChange={e => handleAnswerChange('q10', e.target.value)}
          value={Object.keys(questionScores.q10).find(key => questionScores.q10[key] === answers.q10)}
        >
          {Object.keys(questionScores.q10).map((option, index) => (
            <div key={index} style={{ marginBottom: 8 }}>
            <Radio value={option}>
              {option}. {option === 'A' && '追求收益最大化'}
              {option === 'B' && '实现资产保值'}
              {option === 'C' && '平衡资产配置'}
              {option === 'D' && '资产平稳增值'}
              {option === 'E' && '资产快速增值'}
            </Radio>
          </div>
          ))}
        </Radio.Group>
      </Card>

    {/* <<h2>总分: {totalScore}</h2>
      <h2>风险水平: {determineRiskLevel(totalScore)}</h2> */}
    <Button type="primary" onClick={handleSubmit}>提交</Button>
    </div>
  );
};

export default Questionnaire;
